<template>
    <div class="quickInsert">
        <div class="quickInsert-box">
            <div class="quickInsert-title">
                <span>数据模型</span>
                <i class="el-icon-setting" @click="showCustomKeyEditor('modal')"></i>
            </div>
        </div>
        <div class="quickInsert-box">
            <div class="quickInsert-title">
                <span>Key值</span>
                <i class="el-icon-setting" @click="showCustomKeyEditor('key')"></i>
                <i class="el-icon-arrow-down" @click="CustomKeyState = !CustomKeyState"
                    :style="{'transform': CustomKeyState ? 'rotateZ(0deg)' : 'rotateZ(-90deg)'}"></i>
            </div>
            <el-collapse-transition>
                <div class="quickInsert-content" v-if="CustomKeyState">
                    <div class="listItem" v-for="(item,index) in keyArray" v-if="item.key" :key="index">
                        <el-link type="primary" @click="quickInsert(item.key,'key')">{{item.key}}</el-link>
                    </div>
                </div>
            </el-collapse-transition>
        </div>
        <div class="quickInsert-box">
            <div class="quickInsert-title">
                <span>全局方法</span>
                <i class="el-icon-setting" @click="showCustomKeyEditor('fun')"></i>
                <i class="el-icon-arrow-down" @click="CustomFunState = !CustomFunState"
                    :style="{'transform': CustomFunState ? 'rotateZ(0deg)' : 'rotateZ(-90deg)'}"></i>
            </div>
            <el-collapse-transition>
                <div class="quickInsert-content" v-if="CustomFunState">
                    <div class="listItem" v-for="(item,index) in funArray" :key="index">
                        <el-link type="primary" @click="quickInsert(item.str, 'function')">{{item.str}}</el-link>
                    </div>
                </div>
            </el-collapse-transition>
        </div>
        <div class="quickInsert-box">
            <div class="quickInsert-title">
                <span>全局缓存</span>
                <i class="el-icon-setting" @click="showCustomKeyEditor('cache')"></i>
                <i class="el-icon-arrow-down" @click="CustomCacheState = !CustomCacheState"
                    :style="{'transform': CustomCacheState ? 'rotateZ(0deg)' : 'rotateZ(-90deg)'}"></i>
            </div>
            <el-collapse-transition>
                <div class="quickInsert-content" v-if="CustomCacheState">
                    <div class="listItem" v-for="(item,key) in cacheObj" :key="key">
                        <el-link type="primary" @click="quickInsert(key,'cache')">{{key}}
                        </el-link>
                    </div>
                </div>
            </el-collapse-transition>
        </div>
    </div>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        props: ['editor'],
        data() {
            return {
                CustomModalState: false,
                CustomCacheState: false,
                CustomFunState: false,
                CustomKeyState: false,
            }
        },
        computed: {
            ...mapState("cache", {
                cacheObj: state => state.cacheObj,
            }),
            ...mapState("customKey", {
                keyArray: state => state.keyArray,
            }),
            ...mapState("fun", {
                funArray: state => state.funArray,
            }),
        },
        methods: {
            showCustomKeyEditor(type) {
                this.$store.dispatch('customKey/showCustomDrawer', {
                    activeObj: this.editor,
                    type: type
                });
            },
            quickInsert(str, type) {
                if (type == 'key') {
                    var text = this.editor.getValue();
                    if (!text) {
                        var _str = `    '${str}' : '',`;
                        this.editor.replaceSelection(`{\n${_str}\n}`);
                        this.editor.setCursor(1, _str.length - 2);
                    } else {
                        var position = this.editor.getCursor();
                        var _str = `    '${str}' : '',`;
                        var oldLine = this.editor.getLine(position.line);
                        this.editor.setCursor(position.line, position.ch + oldLine.length);
                        this.editor.replaceSelection('\n' + _str);
                        this.editor.setCursor(position.line + 1, _str.length - 2);
                    };
                } else if (type == 'function') {
                    var position = this.editor.getCursor();
                    this.editor.setSelection({ line: position.line, ch: position.ch - 1 }, { line: position.line, ch: position.ch + 1 });
                    var __str = this.editor.getSelection();
                    if (__str == '\'\'' || __str == '\"\"') {
                        this.editor.replaceSelection(str);
                    } else {
                        this.editor.setCursor(position);
                        this.editor.replaceSelection(str);
                    }
                } else if (type == "cache") {
                    str = 'getCache(\'' + str + '\')';
                    var position = this.editor.getCursor();
                    this.editor.setSelection({ line: position.line, ch: position.ch - 1 }, { line: position.line, ch: position.ch + 1 });
                    var __str = this.editor.getSelection();
                    if (__str == '\'\'' || __str == '\"\"') {
                        this.editor.replaceSelection(str);
                    } else {
                        this.editor.setCursor(position);
                        this.editor.replaceSelection(str);
                    };
                };
                this.editor.focus();
            },
        },
    }

</script>
<style>
    .quickInsert {
        padding: 0 10px;
        position: absolute;
        width: 180px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        overflow-y: auto;
        line-height: 20px;
    }

    .quickInsert .listItem {
        padding: 0 0 0 15px;
    }

    .quickInsert-title {
        font-size: 12px;
        padding: 0 10px;
        line-height: 35px;
        color: #666;
    }

    .quickInsert-content {
        padding: 5px 0;
        border-top: 1px solid #ccc;
    }

    .quickInsert-box {
        border-bottom: 1px solid #ccc;
    }

    .quickInsert-title .el-icon-setting {
        cursor: pointer;
        color: #999;
    }

    .quickInsert-title .el-icon-setting:hover {
        color: #000;
    }

    .quickInsert-title .el-icon-arrow-down {
        transition: transform .3s;
        color: #999;
        cursor: pointer;
        float: right;
        line-height: 30px;
    }

    .quickInsert-title .el-icon-arrow-down:hover {
        color: #000;
    }
</style>